<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        li {
            list-style: none;
        }

        div {
            margin: 5px;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 遍历数组  返回数组的每个元素(值) -->
        <div>
            <p>{{count}}</p>
            <button @click="count++">点击</button>
        </div>
        <hr>
        <div>
            <button @click="addEle">添加元素</button>
            <ul>
                <li v-for="item in list">
                    {{item}}
                </li>
            </ul>
            <hr>
            <!-- <p>获取偶数:{{list.filter(v=>v % 2 == 0)}}</p> -->

            <!-- methods  => 1. 每次调用方法代码都会重新执行  -->
            <p>获取偶数:{{getEven()}}</p>
            <p>获取偶数:{{getEven()}}</p>
            <p>获取偶数:{{getEven()}}</p>
            <p>获取偶数:{{getEven()}}</p>
            <p>获取偶数:{{getEven()}}</p>
            <p>获取偶数:{{getEven()}}</p>

            <!-- computed -->
            <p>获取偶数:{{getOu}}</p>
            <p>获取偶数:{{getOu}}</p>
            <p>获取偶数:{{getOu}}</p>
            <p>获取偶数:{{getOu}}</p>
            <p>获取偶数:{{getOu}}</p>
            <p>获取偶数:{{getOu}}</p>


            <p>now:{{now}}</p>
            <p>now:{{now}}</p>
            <p>now:{{now}}</p>
            <p>now:{{now}}</p>
            <p>now:{{now}}</p>
            <p>now:{{now}}</p>
        </div>
    </div>
</body>
<script>

    // 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护

    // 解决方式:
    // 1. 将复杂的操作整个为一个函数 => 放到 methods中,使用时调用即可
    // 缺点:
    // a. 每次调用方法代码都会重新执行
    // b. 每次数据更新(数据可能是和当前方法无关的数据),视图重新渲染 => 函数也会重新执行

    // 2. 使用计算属性 => Vue中的一个重要特性
    // 作为: 根据data中绑定的数据得到一个新值 (派生值 衍生值 -> 它的值会在Vue应用初次渲染时调用对应的函数得到,并缓存计算的结果) =>  计算属性可以依赖data中的一个或多个数据, 只有当依赖的数据发生改变之后,才会重新调用函数,计算并缓存新的结果

    // 计算属性是一个新值, 它的结果是根据data中的依赖数据响应式得到的,如果数据没有变动会一直使用缓存的结果

    // 计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。


    // 买东西     一个包子 2块钱
    // pay(新值) = price(依赖1) * num(依赖2); 
    //               2             2


    // 老板(计算属性)  和   员工(依赖)


    // 需求:将数组中的每个元素放到对应的li标签内
    var vm = new Vue({
        el: "#app",
        data: {
            count: 0,
            list: [1, 4, 7, 2, 5, 8, 3, 6, 9],
        },
        methods: {
            addEle() {
                var num = Math.round(Math.random() * 30);  //随机元素
                var index = Math.floor(Math.random() * this.list.length);  //随机下标

                // 任意位置新增
                this.list.splice(index, 0, num);
            },
            getEven() {
                console.log("获取偶数:getEven");
                return this.list.filter(v => v % 2 == 0);
            }
        },
        computed: {
            // 计算属性的名称:回调函数(1. 初始化时执行一次,缓存结果  2. 依赖数据变动之后,在执行一次)
            getOu: function () {
                console.log("获取偶数:getOu");
                return this.list.filter(v => v % 2 == 0);
            },
            now: function () {
                return Date.now()
            }
        }

    })



</script>

</html>